import { Configuration } from 'webpack';
import { join, resolve } from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import webpack from 'webpack';
export default {
    mode: 'production',
    target: ['web', 'es5'],
    devtool: 'source-map',
    entry: {
        main: { import: './src/index.tsx', dependOn: 'react-share' },
        'react-share': ['react', 'react-dom']
    },
    // 打包文件出口
    output: {
        filename: 'js/[name].[contenthash].js',
        chunkFilename: 'js/[name].[contenthash].js',
        path: resolve(__dirname, '.', 'dist'),
        clean: true,
        environment: { module: true }
    },
    resolve: {
        extensions: ['.js', '.jsx', '.tsx', '.ts', '.cjs', '.mjs'],
        alias: {
            '@': resolve(__dirname, '.', 'src')
        }
    },
    module: {
        rules: [
            {
                test: /.(ts)x?$/,
                include: resolve(__dirname, '.', 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                include: [resolve(__dirname, '.', 'src')],
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                exportLocalsConvention: 'camelCaseOnly',
                                localIdentName: '[name]_[local]_[hash:base64:4]'
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            additionalData: ''
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|lottie)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/[name].[hash:8][ext][query]'
                }
            }
        ]
    },
    cache: {
        type: 'filesystem',
        cacheDirectory: resolve(__dirname, './.temp_cache'),
        buildDependencies: {
            // 将你的配置添加依赖，更改配置时，使得缓存失效
            config: [__filename]
        }
    },
    //stats: 'summary',
    plugins: [
        new webpack.ProgressPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlugin({
            template: join(__dirname, './public/index.html'),
            filename: 'index.html',
            inject: true,
            minify: true,
            cache: false,
            hash: true //开启hash  ?[hash]
        })
    ],
    devServer: {
        client: {
            logging: 'none',
            overlay: {
                errors: true,
                warnings: true
            },
            reconnect: 3,
            progress: true,
            webSocketTransport: 'ws'
        },
        hot: true,
        webSocketServer: 'ws',
        allowedHosts: 'all',
        open: true,
        port: '2026',
        host: '0.0.0.0',
        liveReload: false,
        compress: false,
        historyApiFallback: true,
        watchFiles: ['./src/**/*', './public/**/*'],
        static: {
            directory: resolve(__dirname, '.', 'dist')
        }
    },
    performance: {
        maxEntrypointSize: 500000,
        maxAssetSize: 500000
    }
} as Configuration;
